import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';
import {Spin} from 'antd';

import Store from './store.js';
import './index.less';
import Pagination from 'rc-pagination';
import Datetime from 'react-datetime';

//component
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';
import Empty from 'components/widgets/Empty';
import ReAvatar from 'components/widgets/ReAvatar';
import ReSelectField from 'components/widgets/ReSelectField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'AgentsDetail';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});

        this.identityList = [
            {label: '全部', value: '',},
            {label: '艺术家', value: '艺术家',},
            {label: '少儿', value: '少儿',},
            {label: '设计师', value: '设计师',},
            {label: '收藏家', value: '收藏家',},
            {label: '美术馆', value: '美术馆',},
            {label: '教育机构', value: '教育机构',},
            {label: '画廊', value: '画廊',},
            {label: '设计机构', value: '设计机构',},
        ];

        this.versionList = [
            {label: '全部', value: ''},
            {label: '个人版', value: '1'},
            {label: '少儿版', value: '2'},
            {label: '机构版', value: '3'},
        ];

        this.payWayList = [
            {label: '全部', value: ''},
            {label: '微信支付', value: '微信支付'},
            {label: '支付宝支付', value: '支付宝支付'},
            {label: '苹果支付', value: '苹果支付'},
            {label: '赠送', value: '赠送'},
        ];

    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderDialog() {
        let recordList = [{state: 1, text: '注册记录'}, {state: 2, text: '购买记录'}];
        let firstRequest = this.store.recordState === 1 ? this.store.registerRequest : this.store.purchaseRequest;
        let total = this.store.recordState === 1 ? this.store.registerTotal : this.store.purchaseTotal;
        let page = this.store.recordState === 1 ? this.store.registerPage : this.store.purchasePage;
        let mapList = this.store.recordState === 1 ? this.store.registerList : this.store.purchaseList;
        let emptyText = this.store.recordState === 1 ? '暂未搜索到注册记录' : '暂未搜索到购买记录';
        let startTime = this.store.recordState === 1 ? this.store.registerStartTime : this.store.purchaseStartTime;
        let endTime = this.store.recordState === 1 ? this.store.registerEndTime : this.store.purchaseEndTime;
        let identity = this.store.recordState === 1 ? this.store.registerIdentity : this.store.purchaseIdentity;
        return (
            <div className={this.store.visible ? 'agents-detail-mask fade-in' : 'agents-detail-mask fade-out'}
                 onClick={() => this.store.closeDialog()}>
                <div className="agents-detail-wrapper" onClick={(e) => e.stopPropagation()}>
                    <div className="agents-detail-scroll-wrapper">
                        <div className="agents-detail-header">
                            <span className="header-title">{this.store.agentUserName + '--详情'}</span>
                            <span className="header-close" onClick={() => this.store.closeDialog()}>
                                <ReIcon icon="window_closes" className="icon"/>
                            </span>
                        </div>
                        <div className="agents-detail-content">
                            <div className="detail-state-wrapper">
                                {
                                    recordList.map((item, index) => {
                                        let active = item.state === this.store.recordState;
                                        return (
                                            <div key={index} onClick={() => this.store.changeState(item.state)}
                                                 className={active ? 'detail-state-item active' : 'detail-state-item'}>
                                                <span>{item.text}</span>
                                            </div>
                                        )
                                    })
                                }
                                <div className="export-btn-wrapper">
                                    <ReButton label={'导出'} className="button-confirm"
                                              onClick={() => this.store.exportData()}/>
                                </div>
                            </div>
                            <div className="agents-detail-search-wrapper">
                                <div className="time-input">
                                    <Datetime value={startTime}
                                              locale="zh-cn"
                                              dateFormat="YYYY-MM-DD"
                                              inputProps={{placeholder: '开始时间'}}
                                              onChange={(e) => this.store.startTimeChange(e)}/>
                                    {/*{*/}
                                    {/*!!this.store.startTime &&*/}
                                    {/*<span className="close-right" onClick={() => this.store.clearStartTime()}>*/}
                                    {/*<ReIcon className='close-btn' icon="tubiao06"/>*/}
                                    {/*</span>*/}
                                    {/*}*/}
                                </div>
                                <div className="time-input">
                                    <Datetime value={endTime}
                                              locale="zh-cn"
                                              dateFormat="YYYY-MM-DD"
                                              inputProps={{placeholder: '结束时间'}}
                                              onChange={(e) => this.store.endTimeChange(e)}/>
                                </div>
                                <ReSelectField
                                    type=""
                                    className="identity-input"
                                    isOpen={false}
                                    list={this.identityList}
                                    value={identity}
                                    placeholder={'用户身份'}
                                    onChange={(v) => this.store.identityChange(v.value)}/>
                                {
                                    this.store.recordState === 2 &&
                                    <ReSelectField
                                        type=""
                                        className="identity-input"
                                        isOpen={false}
                                        list={this.versionList}
                                        value={identity}
                                        placeholder={'购买版本'}
                                        onChange={(v) => this.store.versionChange(v.value)}/>
                                }
                                {
                                    this.store.recordState === 2 &&
                                    <ReSelectField
                                        type=""
                                        className="identity-input"
                                        isOpen={false}
                                        list={this.payWayList}
                                        value={this.store.purchasePayWay}
                                        placeholder={'支付方式'}
                                        onChange={(v) => this.store.payWayChange(v.value)}/>
                                }

                            </div>
                            {
                                this.store.recordState === 1 &&
                                <div className="content-data-wrapper">
                                    <div className="content-header-title">
                                        <div className="content-number title">
                                        </div>
                                        <div className="content-avatar title">
                                            <span>头像</span>
                                        </div>
                                        <div className="content-name title">
                                            <span>姓名</span>
                                        </div>
                                        <div className="content-phone title">
                                            <span>手机号码</span>
                                        </div>
                                        <div className="content-label title">
                                            <span>身份</span>
                                        </div>
                                        <div className="content-time title">
                                            <span>注册时间</span>
                                        </div>
                                        <div className="content-more-btn title">
                                            <span>更多</span>
                                        </div>
                                    </div>
                                    <div className="content">
                                        {
                                            this.store.registerList.map((item, index) => {
                                                let popMenuOption = [{
                                                    'name': '删除',
                                                    'func': (e) => this.store.deleteClick(item),
                                                }];
                                                return (
                                                    <div key={index} className="users-wrapper-pc">
                                                        <div className="user-item-wrapper">
                                                            <div className="content-number">
                                                            <span className="text">
                                                                {(this.store.registerPage - 1) * 20 + index + 1}
                                                            </span>
                                                            </div>
                                                            <div className="content-avatar">
                                                                <p className="text">
                                                                    <ReAvatar
                                                                        src={$$.utils.pictureThumb(item.headPortrait, false)}
                                                                        size={100} className="avatar"/>
                                                                </p>
                                                            </div>
                                                            <div className="content-name">
                                                                <p className="text">
                                                                <span>
                                                                    {item.nickName}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-phone">
                                                                <p className="text">
                                                                <span>
                                                                    {item.phone}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-label">
                                                                <p className="text">
                                                                <span>
                                                                    {item.label}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-time">
                                                                <p className="text">
                                                                <span>
                                                                    {$$.utils.getFormatAllTime2(item.createTime, true)}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-more-btn">
                                                                {
                                                                    popMenuOption.map((item, index) => {
                                                                        if (!item.hide) {
                                                                            return (
                                                                                <div key={index}
                                                                                     className="select-button"
                                                                                     onClick={(e) => item.func && item.func()}>
                                                                                <span
                                                                                    className="btn-name">{item.name}</span>
                                                                                </div>
                                                                            )
                                                                        }
                                                                    })
                                                                }
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            }
                            {
                                this.store.recordState === 2 &&
                                <div className="content-data-wrapper">
                                    <div className="content-header-title">
                                        <div className="content-number title">
                                        </div>
                                        <div className="content-time title">
                                            <span>日期</span>
                                        </div>
                                        <div className="content-name title">
                                            <span>姓名</span>
                                        </div>
                                        <div className="content-phone title">
                                            <span>手机号码</span>
                                        </div>
                                        <div className="content-label title">
                                            <span>身份</span>
                                        </div>
                                        <div className="content-version title">
                                            <span>版本</span>
                                        </div>
                                        <div className="content-money title">
                                            <span>金额</span>
                                        </div>
                                        <div className="content-validity title">
                                            <span>有效期</span>
                                        </div>
                                        <div className="content-way title">
                                            <span>支付方式</span>
                                        </div>
                                        <div className="content-more-btn title">
                                            <span>备注</span>
                                        </div>
                                    </div>
                                    <div className="content">
                                        {
                                            this.store.purchaseList.map((item, index) => {
                                                return (
                                                    <div key={index} className="users-wrapper-pc">
                                                        <div className="user-item-wrapper">
                                                            <div className="content-number">
                                                                <span className="text">
                                                                    {(this.store.purchasePage - 1) * 20 + index + 1}
                                                                </span>
                                                            </div>
                                                            <div className="content-time">
                                                                <p className="text">
                                                                    <span>
                                                                        {$$.utils.getFormatAllTime2(item.payTime, true)}
                                                                    </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-name">
                                                                <p className="text">
                                                                <span>
                                                                    {item.nickName}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-phone">
                                                                <p className="text">
                                                                <span>
                                                                    {item.phone}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-label">
                                                                <p className="text">
                                                                <span>
                                                                    {item.label}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-version">
                                                                <p className="text">
                                                                <span>
                                                                    {item.recommend}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-money">
                                                                <p className="text">
                                                                <span>
                                                                    {item.money / 100}元
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-validity">
                                                                <p className="text">
                                                                <span>
                                                                    {$$.utils.getFormatAllTime2(item.payTime, true)}
                                                                    {' - '}
                                                                    {$$.utils.getFormatAllTime2(item.endTime, true)}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-way">
                                                                <p className="text">
                                                                <span>
                                                                    {item.payWay}
                                                                </span>
                                                                </p>
                                                            </div>
                                                            <div className="content-more-btn">
                                                                <p className="text">
                                                                <span>
                                                                    {item.remark}
                                                                </span>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            }
                            {
                                !firstRequest &&
                                <div className="manage-loading-wrapper">
                                    <Spin spinning={true} size="large" tip={$$.LN.IS_LOADING}/>
                                </div>
                            }

                            {
                                mapList.length === 0 && firstRequest &&
                                <Empty tips={emptyText}/>
                            }
                            {
                                mapList.length > 0 &&
                                <div className="pagination-wrapper">
                                    <div className="pagination-count">
                                        总共{total}条数据，当前有{mapList.length}条
                                    </div>
                                    <Pagination
                                        onChange={(current) => this.store.paginationChange(current)}
                                        defaultPageSize={20}
                                        current={page}
                                        defaultCurrent={page}
                                        total={total}/>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    render() {

        return (
            <div className="orin-s-agentsdetail-root">
                {this.renderDialog()}
            </div>
        );
    }
}